<template>
  <div class="box">
    <header>
      <div class="content">
        <div v-for="(item,index) in tagList" 
        :key="index"
        @click="del($event.target,index)">{{item}}</div>
      </div>
      <button @click="flag=!flag">展开标签库</button>
    </header>
    <div class="list" v-if="flag">
      <ul>
        <li v-for="(item,index) in list" 
        :key="index"
        @click="add($event.target,index)">{{item}}</li>
      </ul>
      <button>换一批</button>
    </div>
    <button class="btn">获取</button>
  </div>
</template>

<script>

export default {
    data() {
      return{
        flag:false,
        tagList:[],
        list:["java","教程","SEM","SEM基础","柚说","关键词","创意","公众号","排名","网络营销","SEM","网络推广","达内","效果","数据","SEO","DSP","百度网盟","百度DSP","广点通","智慧推","粉丝通","新媒体","微信","微博","问答","百科","博客","ASO","网站","着陆页","网站分析","电商"]
      }
    },
    methods:{
      add(item,index){
        console.log(item)
        if(!this.tagList.find(v=>v===item.innerHTML)) {
          this.tagList.push(item.innerHTML)
          item.classList.add('active')
        }
      },
      del(item,index){
        console.log(item)
        this.tagList.splice(index,1)
        item.classList.remove('active')
      }

  }
}

</script>

<style lang='scss'>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
body{
  width: 100%;
  height: 100%;
  background: #eee;
}
.box{
  width: 800px;
  min-height: 500px;
  margin: 0 auto;
}
header{
  width: 800px;
  height: 40px;
  background: #fff;
  margin: 10px auto;
  display: flex;
  .content {
    width: 700px;
    display: flex;
  }
  button{
    padding: 5px;
    background: limegreen;
  }

}
.list{
  width: 800px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #FFF;
      li{
        background: #fff;
        width: 80px;
        height: 41px;
        border: 1px solid;
        margin: 5px 10px;
        text-align: center;
        line-height: 40px;
      }
  }
  button{
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: skyblue;
  }
}
.btn{
  background: limegreen;
  padding: 10px 15px;
  margin: 10px 0;
  color: #FFF;
}
.active{
  color: grey;
}

</style>
